import * as echarts from "echarts";
import { useEffect, useState } from "react"
import lessModule from "./index.module.less"
import { title } from "process";
import React from "react";
import "./index.css"

// 主页-数据维护页面-定检数据维护页面-新增或编辑弹窗组件-图标组件
interface componentInterface {
    id: string
    width:number
    height:number
    title: string
    sourceData: object
}
const HomePage_StatisticalQueryPage_AssessmentReportPage_SeeModalComponent_ChartComponent: React.FC<componentInterface> = (props) => {

    let [echartsLine, setEchartsLine] = useState<echarts.ECharts>()


    const init_echarts = () => {
        echartsLine = echarts.init(document.getElementById(props.id) as HTMLElement)
        setEchartsLine(echartsLine)
        window.addEventListener("resize", () => {
            echartsLine?.resize();
        })

        draw_echarts()
    }

    const draw_echarts = () => {
        const echartsOption = {

            title: {
                text: props.title,
                left:10,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 600,
                    color: "rgba(0, 0, 0, 0.9)",
                },
            },
            tooltip: {
                trigger: "axis",
                backgroundColor: "#FFFFFF",
                textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                },
                axisPointer: {
                    lineStyle: {
                        type: "solid",
                        color: "rgba(64, 93, 249, 0.5)",
                    }
                },
            },
            grid: {
                top: 40,
                left: 50,
                bottom: 50,
                right: 9,
            },
            xAxis: {
                type: "category",
                data: props.sourceData["time"],
                name: '时间/s',
                nameTextStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: "#666666",
                    padding:[18 ,0, 0 ,0] 
                  },
                  nameLocation: 'middle',
                boundaryGap: false,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#000000",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(0, 0, 0, 0.2)",
                    },
                },
                axisLabel: {
                    align: "center",
                    color: "color: rgba(0, 0, 0, 0.85)",
                    margin: 10,
                    fontSize: 12,
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: (() => {
                        return (item: Object, idx: number) => {
                            const isStart = !idx
                            const isLast = idx === props.sourceData["time"]?.length - 1;
                            const label = isStart ? `{start|${item}}` : isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: props.sourceData["time"]?.length / 2,
                    rich: {
                        start: {
                            width: 0,
                            fontSize: 10,
                            align: "left",
                        },
                        last: {
                            width: 0,
                            fontSize: 10,
                            align: "right",
                        },
                    },
                },
            },
            yAxis: {
                type: "value",
                axisLabel: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: "color: rgba(0, 0, 0, 0.85)",
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(0, 0, 0, 0.2)",
                    },
                },
            },
            series: [
                {
                    name: props.title,
                    data: props.sourceData["data"],
                    type: "line",
                    color: "#405DF9",
                    symbol: "none",
                    smooth: true,
                    animation: false,
                }
            ],
        }

        echartsLine?.setOption(echartsOption);
    }



    useEffect(() => {
        init_echarts()
        return () => {
            echartsLine?.dispose()
        }
    }, [props.sourceData])
    return (
  
            <div id={props.id} className="homePageStatisticalQueryPageAssessmentReportPageSeeModalComponentChartComponent" style={{width:props.width,height:props.height}}></div>
   
    )
}
export default HomePage_StatisticalQueryPage_AssessmentReportPage_SeeModalComponent_ChartComponent